import { Form, Input, Button } from 'antd'
import style from './index.module.scss'
// 图片
import loginLogo from '@/assets/images/login-logo.png'
import { useDispatch } from 'react-redux'
import { loginAction } from '@/store/actions/login.js'
import { useHistory } from 'react-router-dom'
export default function Login() {
  const dispatch = useDispatch()
  const history = useHistory()
  // 表单校验成功,发送请求
  const onFinish = async (values) => {
    // console.log('Success:', values)
    await dispatch(loginAction(values))
    history.push('/')
  }

  return (
    <div className={style.login}>
      <div className="login-box">
        <img className="login-logo" src={loginLogo} alt="" />
        <Form
          name="basic"
          wrapperCol={{ span: 24 }}
          initialValues={{ mobile: '13800000002', password: '123456' }}
          onFinish={onFinish}
          autoComplete="off"
          validateTrigger={['onChange', 'onBlur']}
        >
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: '手机号不能为空' },
              {
                pattern:
                  /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: '手机号格式不正确',
              },
            ]}
          >
            <Input size="large" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input.Password size="large" />
          </Form.Item>

          <Form.Item wrapperCol={{ span: 24 }}>
            <Button block size="large" type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
